import {View} from 'react-native';
import {Card, Text, useAppTheme} from 'tsun-smart-ui';
import React from 'react';

interface InfoItem {
  label: string;
  value: string | number;
  unit?: string;
}

interface InfoCardProps  {
  title: string | React.ReactNode;
  items: InfoItem[];
  right?: React.ReactNode;
}

const InfoCard: React.FC<InfoCardProps> = ({title, items, right}) => {
  const theme = useAppTheme();
  return (
    <Card
      title={title}
      titleContainerStyle={{
        marginBottom: 16,
      }}
      right={right}>
      <View className="flex-row flex-wrap gap-y-5">
        {items.map(item => {
          return (
            <View key={item.label} className="w-1/2">
              <Text
                variant="caption"
                style={{
                  color: theme.colors?.neutral?.primary,
                }}>
                {item.label}
              </Text>
              <Text variant="navTitle" className="font-body">
                {item.value}
                {item.unit}
              </Text>
            </View>
          );
        })}
      </View>
    </Card>
  );
};
export default InfoCard;
